<template>
	<view>
		<u-navbar back-text="返回" :background="background" title="">
			<view class="slot-wrap">
				<u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
			</view>
		</u-navbar>
		<view class="content">
			<view>
				<u-grid :border="false" :col="4">
					<u-grid-item>
						<u-icon name="photo" :size="46"></u-icon>
						<view class="grid-text">维修预约</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="lock" :size="46"></u-icon>
						<view class="grid-text">保养预约</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="hourglass" :size="46"></u-icon>
						<view class="grid-text">上门维修</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="hourglass" :size="46"></u-icon>
						<view class="grid-text">预约记录</view>
					</u-grid-item>
				</u-grid>
			</view>

			<view class="">
				<u-dropdown>
					<u-dropdown-item v-model="value1" title="市" :options="options1"></u-dropdown-item>
					<u-dropdown-item v-model="value2" title="全部地区" :options="options2"></u-dropdown-item>
					<u-dropdown-item v-model="value2" title="全部类型" :options="options2"></u-dropdown-item>
					<u-dropdown-item v-model="value2" title="综合排序" :options="options2"></u-dropdown-item>
				</u-dropdown>
			</view>

			<!--门店卡片-->
			<view style="height: 500rpx;width: 750rpx;">
				<view style="margin-top: 20rpx;" v-for="(item, index) in shopList" class="shopCard">
					<view>
						<view class="mer-shop-img fl">
							<a href="#">
								<image style="width: 120rpx; height: 120rpx;" src="/static/head.jfif"></image>
							</a>
						</view>
						<view class="mer-shop-js fl">
							<b>
								<p style="color: #000000;float: left">{{item.name}}</p>
							</b>
							<view style="margin-top: 15rpx;float: left">
								<p >{{item.address}}</p>
							</view>
						</view>
						<view class="mer-shop-js-right fl">
							<text>7.8km</text>
						</view>
					</view>
				</view>
				<u-divider style="background-color: #f8f9fa;">大漠孤烟直</u-divider>
			</view>

		</view>
		<!-- <u-divider style="background-color: #f8f9fa;">大漠孤烟直</u-divider> -->
	</view>
</template>

<script>
	import SelectCarPopup from '../../../common/components/car/select-car-popup.vue'
	export default {
		name: 'OnlineBooking',
		components: {
			SelectCarPopup
		},
		props: {
			data: {
				type: Object,
				default () {
					return {

					}
				}
			}
		},
		data() {
			return {
				background: {
					backgroundColor: '#001f3f',
					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
					// 渐变色
					backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				keyword: "",
				value1: '',
				value2: '',
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				], shopList: [
					{
						name: "江南汽车维修店1",
						address: "江南汽车维修店"
					},
					{
						name: "江南汽车维修店2",
						address: "111"
					},{
						name: "江南汽车维修店3",
						address: "111"
					},{
						name: "江南汽车维修店3",
						address: "111"
					}
				]
			}
		},
		mounted() {
			uni.getLocation({
			    type: 'wgs84',
			    success: function (res) {
			        console.log('当前位置的经度：' + res.longitude);
			        console.log('当前位置的纬度：' + res.latitude);
			    }
			});
		},
		methods: {
			open() {
				this.$refs.selectCarPopup.showPopup();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f9fa;
	}

	.shopCard {
		width: 710rpx;
		height: 200rpx;
		background-color: white;
		text-align: center;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		border-radius: 20rpx;
		border: 1px solid #ffffff;
	}

	.mer-shop-js {
		overflow: hidden;
		padding-left: 20rpx;
		width: 300rpx;
		padding-top: 40rpx;
	}
	
	.mer-shop-js-right {
		overflow: hidden;
		padding-left: 20rpx;
		width: 200rpx;
		padding-top: 50rpx;
	}

	.mer-shop-img {
		width: 120rpx;
		height: 50rpx;
		margin-left: 40rpx;
		line-height: 150px;
	}

	p {
		font-size: 30rpx;
		color: #666666;
		display: inline-block;
		vertical-align: middle;
	}

	h3 {
		font-size: 30rpx;
		color: #333333;
		padding-bottom: 12rpx;
		margin-block-start: 1em;
		margin-block-end: 1em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
	}

	.fl {
		float: left;
	}

	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		flex: 1;
		/* 如果您想让slot内容与导航栏左右有空隙 */
		padding: 0 30rpx;
	}

	.grid-text {
		font-size: 28rpx;
		margin-top: 10rpx;
		color: #000000;
	}
</style>
